
<template>
	<view class="my" :style="{
			paddingTop:statusbarHeight+'px'
		}">
		<view class="card">
			<view class="flex-e">
				<uni-icons type="gear" color="#80E58B" size="25" @click="edit"></uni-icons>
			</view>
			<view class="flex-l">
				<u-avatar @tap="goLogin" size="100" :src="form.headimgurl"></u-avatar>
				<view class="right">
					<text class="name">{{ form.nickname||form.mobile||'' }}</text>
					<view class="vip1">
						<image class="smu-my-vip posi1" src="/static/img/person_info_vip.png"></image>
        <!-- <view class="smu-my-vip posi1"></view> -->
        <view class="name2">{{ form.isvip?'VIP会员':'普通会员' }}</view>
    </view>
				</view>
			</view>

			<view class="flex-l">
				<view class="blo1" @tap="goRecharge">
					<view class="title">{{ form.residue_degree + unit }}</view>
					<view class="val">余额</view>
				</view>
				<view class="blo1">
					<view class="title" v-if="form.vip_expire">{{ form.vip_expire.split(' ')[0] }}到期</view>
					<view class="title" v-else>未开通</view>
					<view class="val">VIP有效期</view>
				</view>
			</view>
			
		</view>

		<view class="blo2">
			<view>
				<view>
					<uni-icons color="#F6D98F" type="vip" size="16"></uni-icons>
					<text class="text1">VIP会员</text>
				</view>
				<view class="text2">开通VIP享无限畅聊</view>
			</view>
			<view class="btn2" @click="jumpSubscribe">
				立即开通
				<uni-icons color="#fff" type="forward" size="16"></uni-icons>
					
			</view>
		</view>

		<view class="blo3">
			<view class="my-cell" @tap="goCell(item.id)" v-for="(item,index) in cells" :key="index">

				<view class="my-cell-left">
					<uni-icons style="margin-left: 6px;" :type="item.icon" color="#80E58B" size="20"></uni-icons>
					<text class="my-cell-name">{{ item.name }}</text>
				</view>
				<view class="my-cell-left">
					<text class="my-cell-name">{{ item.val }}</text>
					<uni-icons style="margin-left: 6px;" type="arrow-right" color="#80E58B" size="20"></uni-icons>
				
				</view>
				
			</view>
			
		</view>
		
		<u-popup mode="center" border-radius="0" v-model="isShowPop">
			<u-image :src="src" width='500' height="500"></u-image>
    </u-popup>
	<u-popup mode="bottom" border-radius="60" v-model="isShowEdit">
			<view class="edit">
				<view class="center">
					<Upload :imgUrl="temp.headimgurl" @getImg="val=>temp.headimgurl=val"></Upload>
				</view>
				<view class="cell">
					<text class="left">ID：</text>
					<text class="right">{{ temp.id }}</text>
				</view>
				<view class="cell">
					<text class="left">昵称：</text>
					<view class="right">
						<input placeholder="请输入昵称" 
							confirm-type="confirm" style="font-size: 30rpx;width:220px;" 
							cursor-spacing="40" 
						  
							ref="inputRef" v-model="temp.nickname" :adjust-position="true"/>
						</view>
				</view>

				<view class="cell">
					<text class="left">手机号：</text>
					<view class="right"><input placeholder="请输入手机号" 
							confirm-type="confirm" style="font-size: 30rpx;width:220px;" 
							cursor-spacing="40" 
						  
							ref="inputRef" v-model="temp.mobile" :adjust-position="true"/> </view>
				</view>

				<view class="cell">
					<text class="left">密码：</text>
					<view class="right" style="display: flex;"><input placeholder="为空则不修改" 
							confirm-type="confirm" style="font-size: 30rpx;width:220px;" 
							cursor-spacing="40" 
							:password="!showPassword"
						  
							ref="inputRef" v-model="temp.password" :adjust-position="true"/> 
							<uni-icons v-if="showPassword" style="margin-left: 14px;" type="eye" size="20" @click="showPassword=false" color="#999"></uni-icons>

<uni-icons v-else style="margin-left: 14px;" type="eye-slash" size="20" @click="showPassword=true" color="#999"></uni-icons>


						
						</view>
				</view>

				<view class="center">
					<view class="bottom">
					<view class="btn8" @tap="isShowEdit=false">取消</view>
					<view class="btn9" @tap="save">保存</view>
				</view>
				</view>
				
			</view>
    </u-popup>

	<u-popup mode="center" border-radius="50" v-model="isShowCard">
			<view class="editCard">

				
				<view class="center">请输入卡密兑换</view>

				<view class="inp">
					<input class="inp-in" placeholder="请输入卡密" 
							confirm-type="confirm" 
							cursor-spacing="40" 
						  
							ref="inputRef" v-model="cardVal" :adjust-position="true"/> 
				</view>
				<view class="p10">
					<view @tap="charge" class="btn">立即兑换</view>
				</view>

				<uni-icons class="posi" type="clear" size="25" @click="isShowCard=false" color="#fff"></uni-icons>
			
				
			</view>
    </u-popup>




	</view>
</template>

<script>
import { deepClone,isPhoneNumber } from '@/utils'
import Upload from '@/components/upload/upload.vue'
import wx from "weixin-js-sdk";
	export default {
		name:"subscribe",
    components:{ Upload },
		data() {
			return {
				showPassword:false,
				cardVal:'',
				isShowCard:false,
				statusbarHeight:0,
				isShowEdit:false,
				isShowPop:false,
				src:'',
				cells:[
					{	
						id:10,
						icon:'calendar',
						name:'任务中心',
						
					},
					{
						id:9,
						icon:'wallet',
						name:'卡密兑换',
					},
					{
						id:1,
						icon:'person',
						name:'在线客服',
						val:''
					},
					{
						id:2,
						icon:'scan',
						name:'关注公众号',
					},
					
					// {
					// 	id:2,
					// 	icon:'mic',
					// 	name:'切换声音',
					// 	val:'男声'
					// },
					// {
					// 	id:3,
					// 	icon:'trash-filled',
					// 	name:'清除聊天记录',
					// 	val:''
					// },
					{
						id:4,
						icon:'bars',
						name:'用户协议',
						val:''
					},{
						id:5,
						icon:'list',
						name:'隐私政策',
						val:''
					},
					// {
					// 	id:6,
					// 	icon:'home',
					// 	name:'关于我们',
					// 	val:''
					// },
					{
						id:7,
						icon:'notification',
						name:'免责声明',
					},
					
					{
						id:8,
						icon:'home',
						name:'退出登录',
						val:''
					},
				],
				form:{
						
					},
					temp:{},
					qrcode:{},
					unit:''
				
            }
		},
		onLoad() {
			this.unit = uni.getStorageSync('unit')
			// #ifndef H5
			this.statusbarHeight = uni.getStorageSync('statusBarHeight') + 50
			// #endif
			// #ifdef H5
			var ua = window.navigator.userAgent.toLowerCase();
			let val = ua.match(/MicroMessenger/i) == 'micromessenger'
			if(val){
				this.cells.splice(this.cells.length-1,1)
			}
			let userId = localStorage.getItem('userId')
			let isJumpMini = localStorage.getItem('isJumpMini')
			if(userId&&isJumpMini=='1'){
				wx.miniProgram.postMessage({ data: { userId:userId,url:'/pages/my/my' } });
				setTimeout(()=>{
					localStorage.setItem('isJumpMini','0')
					// 小程序后退，组件销毁，分享才能收到消息
					wx.miniProgram.navigateBack({delta: 1})
				},400)
			}
			// #endif
				this.getData()
				this.getQrcode()
				uni.$on('updateDataMy', this.getData)
			
		},
		mounted() {
			
		},
		
		computed:{
			
		},
		methods: {
			async charge(){
				const r = await this.$u.api.otherCard({
					code:this.cardVal
				})
				if(r){
					this.$u.toast('兑换成功')
					uni.$emit('updateDataMy')
					this.cardVal = ''

					this.isShowCard = false
				}
			},
			async save(){
				if(!isPhoneNumber(this.temp.mobile)){
					this.$u.toast('请输入正确的手机号');
					return;
				}
				const r = await this.$u.api.userInfoEdit(this.temp)
				if(r) {
					this.$u.toast('修改成功');
					this.isShowEdit = false
					this.getData()
				}
			},
			edit(){
				this.temp = deepClone(this.form)
				this.temp.password = ''
				this.isShowEdit = true
			},
			async getQrcode(){
				const r = await this.$u.api.configQrcode()
				if(r){
					this.qrcode = r.data
				}
			},
			goCell(id){
				if(id==4){
					uni.navigateTo({
						 url: '/pages/userAgreement/userAgreement'
					});
				}else if(id==5){
					uni.navigateTo({
						 url: '/pages/privateAgreement/privateAgreement'
					});
				}else if(id==7){
					uni.navigateTo({
						 url: '/pages/resAgreement/resAgreement'
					});
				}else if(id==1){
					if(uni.getStorageSync('isMiniprogram')=='1'){
						wx.miniProgram.navigateBack({delta: 1})
					}else{
						this.src = this.qrcode.kfcode
						this.isShowPop = true
					}
					
					
				}else if(id==2){
					this.src = this.qrcode.gzhcode
					this.isShowPop = true
				}else if(id==8){
					uni.setStorageSync('h5Token','')
					// #ifdef H5
					var ua = window.navigator.userAgent.toLowerCase();
					let val = ua.match(/MicroMessenger/i) == 'micromessenger'
					if(!val){
						uni.navigateTo({
							url:'/pages/login/login'
						})
					}
					// #endif
				}else if(id==9){
					this.isShowCard = true
				}else if(id==10){
					uni.navigateTo({
						 url: '/pages/task/task'
					});
				}
			},
			goLogin(){
				// #ifdef H5
				uni.navigateTo({
						url:
				'/pages/wechatLoginUserInfo/wechatLoginUserInfo'})
				// #endif
			},
			goRecharge(){
				uni.setStorageSync('residue_degree',this.form.residue_degree)
				uni.navigateTo({
						url:'/pages/recharge/recharge'
					})
			},
			jumpSubscribe(){
				uni.navigateTo({
					url:'/pages/subscribe/subscribe'
				})
			},
			async getData(){
				const r = await this.$u.api.userInfo()
				if(r){
					this.form = r.data
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	
	.my{
		padding:24rpx;
		.blo2{
			margin:40rpx 0;
			border-radius: 24rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 24rpx;
			background: #504E53;

			.btn2{
				font-size: 26rpx;
				color: #fff;
		    background-image: linear-gradient(to bottom, #E7B266, #ff8432);
    border-radius: 40px;
    border: 1px solid #fff;
    padding: 10rpx 20rpx;
	display: flex;
	align-items: center;
}
.text1{
	color: #F6D98F;
	font-size: 30rpx;
	margin-left: 8rpx;
}
.text2{
	margin-top: 10rpx;
	color: #fff1cf;
	font-size: 24rpx;
}
		}
		
		.card{
			padding:24rpx 40rpx;
			border-radius: 20rpx;
			background: #4a4e56;
			.flex-e{
				display: flex;
				justify-content: flex-end;
			}
			.flex-l{
				display: flex;
				justify-content: flex-start;
				align-items: center;
				.right{
					margin-left: 20rpx;
					color: #fff;
					.name{
						margin-left: 6rpx;
						font-size: 34rpx;
					}
				}
				.blo1{
					margin-top: 40rpx;
					width: 50%;
					display: flex;
					justify-content: center;
					align-items: center;
					flex-direction: column;
					color: #fff;
					.title{
						font-size: 30rpx;
						color: #fff;
					}
					.val{
						margin-top: 10rpx;
						font-size: 32rpx;
						color: #fff;
					}
				}
				
			}
		}
		.smu-my-vip{
    // background-image: url('/static/img/person_info_vip.png');
    // background-size: 100% 100%;
    width: 16px;
    height: 16px;
}
.posi1{
        position: absolute;
    left: -48rpx;
   
    }

	.vip1{
        position: relative;
        margin-left: 50rpx;
        margin-top: 10rpx;
    }
	.name2{
        background: linear-gradient(180deg,#f0f3fa,#bbc4d2);
    box-sizing: border-box;
    border-top-right-radius: 12px;
    border-bottom-right-radius: 12px;
    font-size: 10px;
    font-weight: 700;
    height: 16px;
    padding-left: 12px;
    padding-right: 5px;
    margin-left: -16px;
    margin-top: 12px;
    color: #919aa9;
    line-height: 16px;
	width:65px;
   
    }
	}
	.my-cell{
		background: #4a4e56;
		padding: 16px 10px;
		border-radius: 14px;
		margin:16px 0;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.my-cell-left{
		display: flex;
		align-items: center;
		justify-content: flex-start;
	}
	.my-cell-name{
		color: #a4a4a4;
		font-size: 16px;
		margin-left: 8px;
	}

	.editCard{
		position: relative;
		width: 300px;
		background:rgba(#151520, 0.9);
		.posi{
			position: absolute;
			right: 14px;
			top: 18px;
		}
		
		.center{
			display: flex;
			justify-content: center;
			align-items: center;
			background-image: linear-gradient(to top, #7CD887,#75CCD1);
			padding: 20px 0;
			color: #fff;
			font-size: 16px;
		}
		.inp{
			width: 100%;
			padding: 20px;
		}
		.inp-in{
			border-radius:6px;
			border:1px solid #666;
			font-size: 30rpx;padding: 10px 10px;color:#fff
		}
		.p10{
			padding: 0 20px 20px;
		}
		.btn{
			width: 100%;
			background-image: linear-gradient(to top, #7CD887,#75CCD1);
			display: flex;
			justify-content: center;
			padding: 14px 0;
			color: #fff;
			border-radius: 40px;
		}
	}

	.edit{
		background:rgba(#151520, 0.9);
		padding: 20px;
		.center{
			display: flex;
			justify-content: center;
			align-items: center;
		}
		.cell{
			padding:10px 0;
			font-size: 16px;
			display: flex;
			border-bottom: 1px solid #1f1f2f;
			.left{
				display: inline-block;
				width: 70px;
				
				text-align: right;
				color: #a4a4a4;

			}
			.right{
				margin-left: 4px;
				color:#fff;
			}

		}
		.bottom{
			margin-top: 20px;
			display: flex;
			justify-content: space-between;
			width: 300px;
			.btn8{
				width: 130px;
				height: 36px;
				background: #EDC596;
				border-radius: 80rpx;
				border:1px solid #fff;
				display: flex;
				justify-content: center;
				align-items: center;
			
				margin-right: 30rpx;
			}
			.btn9{
				width: 130px;
				height: 36px;
				background-image: linear-gradient(to bottom, #E7B266,#ff8432);
		
				border-radius: 80rpx;
				border:1px solid #fff;
				display: flex;
				justify-content: center;
				align-items: center;
			}
		}
		
	}

	
	

</style>
